<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">btn</button>
</body>
<script>
    // 防抖和节流：防抖节流分为防抖和节流，都是为了防止短时间内高频繁调用同一接口的方法。
    // 防抖：设置延时器，短时间高频率触发只有最后一次触发成功
    var timer;
    document.getElementById('btn').onclick = function () {
        clearTimeout(timer)
        timer = setTimeout(function () {
            // 请求
            console.log(1);
        }, 1000)
    }
    // 节流：设置状态锁，短时间高频率触发只有第一次触发成功
    var key = false
    document.getElementById('btn').onclick = function () {
        // if (key === false) {
        if (!key) {
            // 请求
            key = true
            console.log(1);
            // 请求
            setTimeout(function () {
                key = false
            }, 1000)
        }
    }
    // 区别：函数节流不管事件触发有多频繁，
    //         都会保证在规定时间内一定会真正执行一次事件处理函数，而函数防抖只是在最后一次触发后才会执行。
</script>

</html>